require(['config'], () => {
    require(['jquery', 'artTemplate', 'loadHeaderFooter'], ($, template) => {
        /************** 初始化显示购物车数据 ******************/

        // 从本地存储中读取购物车数据
        let cart = JSON.parse(localStorage.getItem('cart')) || []
        // 渲染数据
        const html = template('cart-temp', { cart })
        $('.list').html(html)

        /***************** 删除购物车数据 ******************/

        // 给删除按钮绑定点击事件
        $('.list').on('click', '.d-btn', e => {
            // 获取当前点击商品的id
            const id = $(e.currentTarget).data('id')
            // 从数组中删除当前点击的商品信息
            // 使用fiter数组过滤器来过滤出与当前商品id不同的商品
            // 并重新保存至本地存储
            console.log(cart)
            cart = cart.filter(prod => prod.id != id)
            localStorage.setItem('cart', JSON.stringify(cart))
            // 从list删除该项商品
            // $(e.currentTarget).parents('.ietm').remove()
            // 重新渲染页面
            const html = template('cart-temp', { cart })
            $('.list').html(html)

            return false
        })

         /***************** 修改购车商品数量 ******************/
        const modifyAmount = e => {
            //找到当前商品所在item
            const item = $(e.currentTarget).parents('.item')
            // 获取当前商品原始信息
            let {amount, id, price, } = item.data('info')
            // 判断加还是减
            amount = Number(amount)
            if ($(e.currentTarget).is('.cut')) {
                if (amount > 1) {
                    amount -=1
                }
            }else if ($(e.currentTarget).is('.add')) {
                amount += 1
            } else {//输入数量
                //当前文本框中输入的值
                const val = Number($(e.currentTarget).val())
                if (val < 1) {
                    $(e.currentTarget).val(amount) 
                }else {
                    amount = val
                }
            }
            // 修改数组中的元素值
            const prod = cart.find(prod => prod.id === id)
            prod.amount = amount
            // cart.forEach(prod => {
            //     if (prod.id === id) {
            //         prod.amount = amount
            //     }
            // })
            // 重新保存至购物车数组到本地存储中
            localStorage.setItem('cart', JSON.stringify(cart))
            // 更新当前商品数量与金额
            $(e.currentTarget).siblings('.int-num').val(amount)
            $(e.currentTarget).parent().next().find('span').html('￥' + (amount * price).toFixed(2))
            $(e.currentTarget).parents('.item').data('info', prod)
            // const html = template('cart-temp', { cart })
            // $('.list').html(html)
            
            calcTotal()

        }
        $('.list').on('click', '.cut , .add', modifyAmount)
        $('.list').on('blur', '.int-num', modifyAmount)

        

        /***************** 全选与取消全选 ******************/
        $('.checkAll').on('click', e => {
            // 当前复选框的状态
            const checked = $(e.target).prop('checked')
            // 修改所有商品的选中状态
            $('.check').prop('checked', checked)
            calcTotal()
        })
        $('.check').on('click', e => {
            // 筛选出所有选中的类名为 .check 元素
            $('.checkAll').prop('checked', $('.check:checked').length === cart.length)
            calcTotal()
        })

        /***************** 计算合计金额 ******************/
        function calcTotal () {
            let sum = 0
            $('.check:checked').each((index , element) => {
                const {price, amount} = $(element).parents('.item').data('info')
                sum += price * amount
            })
            // 显示合计金额
            $('.total-num').html(sum.toFixed(2))
            // 显示已选多少件商品
            $('.a-num').text($('.check:checked').length)
        }

        /************* 点击登陆弹出协议框及页面跳转 ****************/
        // 绑定点击事件
        $('body').on('click', '.log-in , .agree , .n-agree , .close', e => {
            if ($(e.currentTarget).is('.log-in')) {// 登陆弹出协议
                $('.login').css({'display':"block"})
                return false
            }else if ($(e.currentTarget).is('.agree')) {// 同意并跳转
                location.href = '/html/login.html'
                $('.login').css({'display':"none"})
            } else {// 不同意或者关闭协议框
                location.reload()
                $('.login').css({'display':"none"})
            }
        })

        /************* 点击注册弹出协议框及页面跳转 ****************/
        // 绑定点击事件
        $('body').on('click', '.sign-up', () => {
            location.href = '/html/sign-up.html'
        })
    })
})